<script setup lang="ts">
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: 'Kaoqin'
});
import uploadExcel from '@/components/uploadExcel/index.vue';
import '@vue-office/excel/lib/index.css';
import { ref } from 'vue';
import { ExcelData } from '@/components/uploadExcel/types';
import { l2m } from '@/utils/utils.ts';

const kaoqinData = ref<ExcelData[]>();
const qingjiaData = ref<ExcelData[]>();
const waichuData = ref<ExcelData[]>();
const chuchaiData = ref<ExcelData[]>();

/**
 * @Description: 将上传的表格数据处理成想要的数据
 */
function dataGenerate() {
  const kaoqinMap = l2m(kaoqinData.value[0].results, '姓名');
  const qingjiaMap = l2m(qingjiaData.value[0].results, '姓名');
  const waichuMap = l2m(waichuData.value[0].results, '姓名');
  const chuchaiMap = l2m(chuchaiData.value[0].results, '姓名');
  console.log(kaoqinMap);
  console.log(qingjiaMap);
  console.log(waichuMap);
  console.log(chuchaiMap);
}
</script>

<template>
  <div>
    <el-row>
      <el-col :span="6">
        <uploadExcel v-model="kaoqinData" btn-text="考勤表上传" />
      </el-col>
      <el-col :span="6">
        <uploadExcel v-model="qingjiaData" btn-text="请假表上传" />
      </el-col>
      <el-col :span="6">
        <uploadExcel v-model="waichuData" btn-text="外出表上传" />
      </el-col>
      <el-col :span="6">
        <uploadExcel v-model="chuchaiData" btn-text="出差表上传" />
      </el-col>
    </el-row>
    <el-button type="primary" style="width: 100%" @click="dataGenerate">处理数据</el-button>
  </div>
</template>
